var app = getApp()

import {
  getLabels,
  addItemLabelRadio,
  addItemLabelCheck,
} from '../../../api/douyin'

Component({
  data: {
    popupHeight: 0, // 弹出层的高度 - 整个屏幕的高度
    contentHeight: 0, // 滑动内容区域的高度（整屏高度减去胶囊高度）
    movableItem: [], // 主数组
    layerItem: [], // 副数组

    //当前选中滑块的id
    selectId: 0,
    boxHeight: 0, // 容器总高度
    itemHeight: 51, // 滑块总高度,即滑块本身加上边距的高度
    // 列表
    list: [],

    // 列表项操作类
    checked: false,



    // Collapse 折叠面板
    activeCollapse: [],

    // 多选按钮
    checkbox: [{
      name: '多选',
    }, {
      name: '多选',
    }, {
      name: '多选',
    }, {
      name: '多选',
    }, {
      name: '多选',
    }, {
      name: '多选',
    }, {
      name: '多选',
    }, {
      name: '多选',
    }, ],
    value2: -1,

  },
  properties: {
    // 项目ID
    itemid: {
      type: Number,
      value: 0
    },
  },

  ready() {
    // 系统屏幕位置信息
    const systemInfo = wx.getSystemInfoSync()

    // 胶囊位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect()

    this.setData({
      popupHeight: systemInfo.screenHeight, // 整个屏幕的高度
      contentHeight: systemInfo.screenHeight - menuButtonInfo.bottom, // 滑动内容区域的高度（整屏高度减去胶囊高度）(ios底部40高度不用管)
    })
  },

  methods: {

    // ##########################################################################################
    // # Popup弹出层模块
    // ##########################################################################################

    /******************** 组件页面全屏弹出框 ********************/

    // 打开弹出层
    onPopupOpen() {
      this.handleLabelSetInit()
      this.setData({
        show: true,
      })
    },

    // 收起弹出层
    onPopupHide() {
      this.setData({
        show: false,
      })
    },

    // 打开标签编辑页面
    openLabelEditPopup() {
      this.setData({
        show: false,
      })
      this.triggerEvent("openpopup")
    },

    // ##########################################################################################
    // # 单选多选按钮
    // ##########################################################################################

    // 折叠面板
    onChangeCollapse(e) {
      const value = e.detail.value
      this.setData({
        activeCollapse: value,
      })
    },

    // 单选按钮
    onChangeRadio(e) {
      const value = e.detail.value
      this.handleLabelSetItem(value)

      const index = e.currentTarget.dataset.index
      this.data.list[index]['vol'] = value
      this.setData({
        list: this.data.list
      })
    },

    // 多选按钮
    onChangeCheckbox(e) {
      const groupid = e.currentTarget.dataset.id
      const value = e.detail.value
      this.handleLabelAddItemCheckbox(groupid, value)

      const index = e.currentTarget.dataset.index
      this.data.list[index]['vol'] = value
      this.setData({
        list: this.data.list
      })
    },

    // ##########################################################################################
    // # 云服务交互
    // ##########################################################################################

    // 获取标签列表
    handleLabelSetInit() {
      getLabels(this.data.itemid).then(res => {
        if (res.status == 200) {
          this.setData({
            list: res.data.list,
            activeCollapse: res.data.activeCollapse,
          })
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // 标签变更(单选)
    handleLabelSetItem(value) {
      addItemLabelRadio(this.data.itemid, value).then(res => {
        if (res.status == 200) {
          this.setData({
            list: res.data.list,
            activeCollapse: res.data.activeCollapse,
          })
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // 标签变更(多选)
    handleLabelAddItemCheckbox(groupid, value) {
      addItemLabelCheck(this.data.itemid, groupid, value).then(res => {
        if (res.status == 200) {
          this.setData({
            list: res.data.list,
            activeCollapse: res.data.activeCollapse,
          })
        } else {
          app.showToast(res.msg)
        }
      })
    },

    // ##########################################################################################

  }
})